<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box-shadow-example {
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }
        .inner-shadow-example {
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
        }
        .gradient-shadow-example {
            width: 200px;
            height: 200px;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), transparent);
        }
        .drop-shadow-example {
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
        }
        .text-shadow-example {
            font-size: 24px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<div class="box-shadow-example"></div>
<div class="inner-shadow-example"></div>
<div class="gradient-shadow-example"></div>
<div class="drop-shadow-example"></div>
<h1 class="text-shadow-example">Пример текстового эффекта</h1>
</body>
</html>